<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
</style>

<template>
  <div class="div-relative feedback">
    <Row :gutter="10">
      <Card>
        <div class="table-head">
          <Button type="primary" class="Button" @click="add()">添加</Button>
        </div>
        <Row class="margin-top-10">
          <Table stripe border :columns="columns" :data="data" @on-row-click="onRowData"
                 @on-selection-change="selectionChange" ref="selectionTable"></Table>
        </Row>
        <div style="margin: 10px;overflow: hidden;height: 36px;">
          <div style="float: right;">
            <Page :total="total" :current="page" @on-change="changePage" show-elevator></Page>
          </div>
        </div>
      </Card>
      <Modal :width="600" title="详情"
             v-model="showCurrentTableData"
             ok-text="确定"
             cancel-text="取消"
             @on-ok=""
             @on-cancel=""
             class-name="vertical-center-modal"
             class="Modal-Detail-div">
        <Form label-position="top">
          <FormItem label="时间">
            <div class="dataDetail-div" v-text="dataDetail.create_time"></div>
          </FormItem>
          <FormItem label="图片" v-if="dataDetail.image && dataDetail.image.length > 0">
            <div class="dataDetail-div">
              <img v-for="el in dataDetail.image" :src="el.url" class="img">
            </div>
          </FormItem>
          <FormItem label="内容" v-if="dataDetail.content">
            <div class="dataDetail-div" v-text="dataDetail.content"></div>
          </FormItem>
          <FormItem label="反馈信息" v-if="dataDetail.reply && dataDetail.reply.length > 0">
            <div class="dataDetail-div">
              <div v-for="(el, index) in dataDetail.reply">
                <div class="back-time" v-text="el.create_time"></div>
                <div class="back-content" v-text="el.content"></div>
              </div>
            </div>
          </FormItem>
        </Form>
      </Modal>
      <!--编辑-->
      <Modal v-model="addCurrentTableData" :width="600" :mask-closable="false" :closable="false"
             class-name="vertical-center-modal" class="Modal-Detail-div">
        <h3 slot="header" style="color:#2D8CF0">编辑</h3>
        <Form label-position="top">
          <FormItem label="内容">
            <Input v-model="addData.content" type="textarea" class="textarea_resize"
                   :autosize="{minRows: 3}" placeholder="内容"></Input>
          </FormItem>
          <FormItem label="图片">
            <div class="dataDetail-div chooseUser accessory feedback_add_accessory">
              <img v-for="el in addData.imagesArr" :src="el.url" class="img">
              <Upload
                :before-upload="handleUpload" action="" accept="image/*" :format="format"
                :multiple="true">
                <Button icon="ios-cloud-upload-outline">选择文件</Button>
              </Upload>
            </div>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="hideAddModal">取消</Button>
          <Button type="primary" :loading="saveLoading" @click="saveInfoAjax()">确定</Button>
        </div>
      </Modal>
    </Row>
    <spin-page :showSpin="showSpin"></spin-page>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import Nim from '../../libs/mod.nim';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import spinPage from '../components/spin-page.vue';
  export default {
    components: {
      spinPage
    },
    data () {
      return {
        total: 0,
        page: 1,
        size: 10,
        order_by: [],
        uid: '', // 登录用户的userId
        format: Util.constant.format,
        id: '',
        save_loading: false,
        addData: {
          content: '',
          anonymous: false,
          imagesArr: [],
        },
        showCurrentTableData: false,
        loading: true,
        showCurrentColumns: [],
        editInlineAndCellData: [],
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            key: 'content',
            title: '内容',
            align: 'center',
          },
          {
            key: 'create_time',
            title: '时间',
            align: 'center',
            width: 200
          },
          {
            key: 'is_reply',
            title: '状态',
            align: 'center',
            width: 100,
            render: (h, params) => {
              var is_reply = params.row.is_reply;
              return h('div', [
                h('span', is_reply > 0 ? '已受理' : '未受理')
              ]);
            }
          },
        ],
        data: [],
        dataDetail: {},
        addCurrentTableData: false,
        saveLoading: false,
        ajaxType: 'add',
        selectionArr: [],
        showSpin: false,//加载中
      };
    },
    mounted: function () {
      var _this = this;
    },
    beforeCreate: function () {
      var _this = this;
    },
    beforeMount: function () {
      var _this = this;
    },
    beforeUpdate: function () {
      var _this = this;
    },
    updated: function () {
      var _this = this;
    },
    beforeDestroy: function () {
      var _this = this;
    },
    destroyed: function () {
      var _this = this;
    },
    created: function () {
      var _this = this;
      _this.getDataList();
      // 消息中心跳转过来的
      var from_id = sessionStorage.getItem('from_id');
      if (from_id && from_id != '') {
        _this.show({id: from_id});
        sessionStorage.removeItem('from_id');
      }
    },
    methods: {
      // 取消列表选中
      hideNums: function () {
        var _this = this;
        this.$refs.selectionTable.selectAll(false);
        _this.selectionArr = [];
      },
      getDataList () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          page: _this.page,
          size: _this.size,
        };
        var params = {
          url: '/feedback/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.showSpin = true;
        function _successFun(res) {
          _this.showSpin = false;
          if (res.result == 0) {
            var _data = res.data || [];
            for (var k in _data) {
              if (!_data[k]) {
                continue;
              }
              _data[k]._disabled = true;// 禁用复选框
            }
            _this.total = res.rows;
            _this.data = _data;
            _this.hideNums();
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      handleSearch () {
        var _this = this;
        _this.page = 1;
        var searchConName = _this.searchConName;
      },
      changePage (page) {
        var _this = this;
        _this.page = page;
        _this.getDataList();
      },
      onRowData: function (data, index) {
        var _this = this;
        _this.show(data);
      },
      show: function (data) {
        var _this = this;
        var id = data.id;
        _this.id = id;

        var data = {
          id: _this.id,
        };
        var params = {
          url: '/feedback/query',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.showSpin = true;
        function _successFun(res) {
          _this.showSpin = false;
          if (res.result == 0) {
            var _data = res.data || [];
            _this.dataDetail = _data;
            _this.showCurrentTableData = true;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      asyncOK: function () {
        var _this = this;
        _this.showCurrentTableData = false;
      },
      // 列表多选 选中数据
      selectionChange: function (selection) {
        var _this = this;
        _this.selectionArr = selection;
      },
      // 隐藏编辑页面
      hideAddModal: function () {
        var _this = this;
        _this.addCurrentTableData = false;
        _this.showCurrentTableData = false;
      },
      // 显示添加界面
      add: function () {
        var _this = this;
        _this.ajaxType = 'add';
        _this.addData.content = '';
        _this.addData.anonymous = false;
        _this.addData.imagesArr = [];
        _this.addCurrentTableData = true;
      },
      // 保存
      saveInfoAjax () {
        var _this = this;
        var content = _this.addData.content;
        var anonymous = _this.addData.anonymous;
        var imagesArr = _this.addData.imagesArr;
        if (content == '') {
          _this.$Message.destroy();
          _this.$Message.error('请填写意见内容!');
          return false;
        }
        var images = [];
        for (var k in imagesArr) {
          if (!imagesArr[k]) {
            continue;
          }
          images.push(imagesArr[k].id);
        }
        var data = {
          content: content,
          images: images,
          version: Util.version,
        };
        var url = '/feedback/add';
        var params = {
          url: url,
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        _this.save_loading = true;
        function _successFun(res) {
          _this.save_loading = false;
          if (res.result == 0) {
            var _data = res.data || {};
            _this.addData.content = '';
            _this.addData.anonymous = false;
            _this.addData.imagesArr = [];
            _this.getDataList();
            _this.hideAddModal();
            _this.$Message.destroy();
            _this.$Message.success('保存成功!');
          } else {
            _this.$Message.destroy();
            _this.$Message.error('保存失败!');
          }
        }
      },
      // 选中文件
      handleUpload: function (file) {
        var _this = this;
        _this.UploadFile(file);
        return false;
      },
      // 上传文件
      UploadFile: function (file) {
        var _this = this;
        var name = file.name;
        var arr = name.split('.');
        var type = arr[arr.length - 1];
        if (!(Util.constant.format.indexOf(type) > -1)) {
          _this.$Message.destroy();
          _this.$Message.error('请上传图片!');
          return false;
        }
        var formData = new FormData();
        formData.append("file", file);
        formData.append("type", "image");
        var params = {
          url: '/file/addFile',
          type: Util.method.post,
          data: formData,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data;
            var id = data.id;
            var name = data.name;
            var url = data.url;
            var obj = {
              id: id,
              name: name,
              url: url,
            };
            _this.addData.imagesArr.push(obj);
          } else {
            _this.$Message.destroy();
            _this.$Message.error('上传失败!');
          }
        }
      },

    }
  };
</script>

